<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <meta name="renderer" content="webkit">
   <title>首页 - 道路运输从业人员安全学习监管平台</title>
   <!-- import CSS -->
   <link rel="stylesheet" href="/style/default/index.css">
   <link rel="stylesheet" href="/style/default/my.css">
   <link rel="stylesheet" href="http://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
   <style>
      .btn_cls {
         padding: 15px 10px 10px 10px;
         width: 90%;
         font-size: 1.1rem;
      }

      .btn_cls i {
         font-size: 2.0rem;
         height: 3rem;
      }

      .btn_cls2 {
         padding: 15px 10px 10px 10px;
         width: 90%;
         text-align: left;
      }

      .btn_cls2 span {
         font-size: 1.2rem;
         height: 3rem;
      }

      .btn_cls2 div {
         font-size: 0.9rem;
         text-align: right;
      }
   </style>
</head>

<body style="background-color:#f8f8f8;margin: 20px;">
   <div id="app">

      <el-row :gutter="20">
         <el-col :span="12">
            <el-card class="box-card">
               <div slot="header" class="clearfix">
                  <span>基础数据</span>
               </div>
               <el-row :gutter="20" style="">
                  <el-col :span="6">
                     <el-button class="btn_cls2">
                        <span class="el-icon-user my-color-danger"> 2230人</span><br />
                        <div>学员总数</div>
                     </el-button>
                  </el-col>
                  <el-col :span="6">
                     <el-button class="btn_cls2">
                        <span class="el-icon-reading my-color-primary"> 1654人</span><br />
                        <div>总学习人次</div>
                     </el-button>
                  </el-col>
                  <el-col :span="6">
                     <el-button class="btn_cls2">
                        <span class="el-icon-date my-color-warning"> 1332人</span><br />
                        <div>总上线人数</div>
                     </el-button>
                  </el-col>
                  <el-col :span="6">
                     <el-button class="btn_cls2">
                        <span class="el-icon-coordinate my-color-success"> 1209人</span><br />
                        <div>总通过人次</div>
                     </el-button>
                  </el-col>
               </el-row>
               <el-row :gutter="20" style="margin-top: 25px;">
                  <el-col :span="6">
                     <el-button class="btn_cls2">
                        <span class="el-icon-shopping-cart-full my-color-danger"> 27个</span><br />
                        <div>公司数量</div>
                     </el-button>
                  </el-col>
                  <el-col :span="6">
                     <el-button class="btn_cls2">
                        <span class="el-icon-shopping-cart-1 my-color-success"> 47个</span><br />
                        <div>课程数量</div>
                     </el-button>
                  </el-col>
                  <el-col :span="6">
                     <el-button class="btn_cls2">
                        <span class="el-icon-shopping-cart-2 my-color-warning"> 80.08%</span><br />
                        <div>本月上线率</div>
                     </el-button>
                  </el-col>
                  <el-col :span="6">
                     <el-button class="btn_cls2">
                        <span class="el-icon-circle-plus-outline my-color-primary"> 73.54%</span><br />
                        <div>本月预计收费</div>
                     </el-button>
                  </el-col>
               </el-row>
            </el-card>
         </el-col>
         <el-col :span="12">
            <el-card class="box-card">
               <div slot="header" class="clearfix">
                  <span>上月数据</span>
               </div>
               <el-row :gutter="20" style="">
                  <el-col :span="6">
                     <el-button class="btn_cls2">
                        <span class="el-icon-user my-color-danger"> 2230人</span><br />
                        <div>学员总数</div>
                     </el-button>
                  </el-col>
                  <el-col :span="6">
                     <el-button class="btn_cls2">
                        <span class="el-icon-reading my-color-primary"> 1654人</span><br />
                        <div>上月学习人次</div>
                     </el-button>
                  </el-col>
                  <el-col :span="6">
                     <el-button class="btn_cls2">
                        <span class="el-icon-date my-color-warning"> 1332人</span><br />
                        <div>上月上线人数</div>
                     </el-button>
                  </el-col>
                  <el-col :span="6">
                     <el-button class="btn_cls2">
                        <span class="el-icon-coordinate my-color-success"> 1209人</span><br />
                        <div>上月通过人次</div>
                     </el-button>
                  </el-col>
               </el-row>
               <el-row :gutter="20" style="margin-top: 25px;">
                  <el-col :span="6">
                     <el-button class="btn_cls2">
                        <span class="el-icon-shopping-cart-full my-color-danger"> 27个</span><br />
                        <div>总公司数量</div>
                     </el-button>
                  </el-col>
                  <el-col :span="6">
                     <el-button class="btn_cls2">
                        <span class="el-icon-shopping-cart-1 my-color-success"> 47个</span><br />
                        <div>总课程数量</div>
                     </el-button>
                  </el-col>
                  <el-col :span="6">
                     <el-button class="btn_cls2">
                        <span class="el-icon-shopping-cart-2 my-color-warning"> 80.08%</span><br />
                        <div>总上线率</div>
                     </el-button>
                  </el-col>
                  <el-col :span="6">
                     <el-button class="btn_cls2">
                        <span class="el-icon-circle-plus-outline my-color-primary"> 73.54%</span><br />
                        <div>总通过率</div>
                     </el-button>
                  </el-col>
               </el-row>
            </el-card>
         </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 10px;">
         <el-col :span="12">
            <el-card class="box-card">
               <div slot="header" class="clearfix">
                  <span>仅几个月通过率走势图</span>
               </div>
               <div>
                  <ve-line :data="chartData"></ve-line>
               </div>
            </el-card>
         </el-col>
         <el-col :span="12">
            <el-card class="box-card">
               <div slot="header" class="clearfix">
                  <span>上月数据</span>
               </div>
               <div>
                  <ve-line :data="chartData"></ve-line>
               </div>
            </el-card>
         </el-col>
      </el-row>


   </div>
</body>
<script src="http://cdn.staticfile.org/vue/2.6.10/vue.min.js"></script>
<script src="http://cdn.staticfile.org/element-ui/2.12.0/index.js"></script>
<script src="http://cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="http://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<script src="/js/validate.js"></script>
<script src="/js/my_util.js?t=29348"></script>

<script>
   var vm = new Vue({
      el: '#app',
      data: function () {
         return {
            tagHeight: window.innerHeight / 5, // 表格高，当窗口改变大小的时候通过 pageResize 修改该值
            loadLoading: false, // 显示登录等待中

            chartData: {
               columns: ['日期', '访问用户', '下单用户', '下单率'],
               rows: [
                  { '日期': '1/1', '访问用户': 1393, '下单用户': 1093, '下单率': 0.32 },
                  { '日期': '1/2', '访问用户': 3530, '下单用户': 3230, '下单率': 0.26 },
                  { '日期': '1/3', '访问用户': 2923, '下单用户': 2623, '下单率': 0.76 },
                  { '日期': '1/4', '访问用户': 1723, '下单用户': 1423, '下单率': 0.49 },
                  { '日期': '1/5', '访问用户': 3792, '下单用户': 3492, '下单率': 0.323 },
                  { '日期': '1/6', '访问用户': 4593, '下单用户': 4293, '下单率': 0.78 }
               ]
            },

         }
      },
      mounted() {
         // 当窗口大小发生改变的时候系统自动调用
         window.onresize = () => {
            this.pageResize();
         }
      },
      methods: {
         // 改变表格高度
         pageResize() {
            this.tagHeight = window.innerHeight / 5;
         },

      },
   });

   // 自动执行，读取表格数据等
   function loadInitData() {


   }

   loadInitData();

</script>

</html>